<template>
    <div class="personalCenter">
        <el-container>
            <el-container>
                <el-aside width="400px">
                    <el-col :span="24">

                        <div class="demo-basic--circle">

                            <el-avatar
                                    :size="100"
                                    :src="circleUrl"
                                    align="center"
                            />

                            <div style="font-weight: bold">
                                <span>{{this.userInfo.username}}</span>
                            </div>
                        </div>
                    </el-col>
                    <div style="float: left;text-align: right;margin-left: 50px">
                            <el-row style="text-align: right;font-size: medium">
                                <el-col :span="12" style="text-align: right;font-weight: 700;" >
                                    <div>手机号码：</div>
                                </el-col>
                                <el-col :span="12" style="text-align: left;" >
                                    <div>{{this.userInfo.mobile}}</div>
                                </el-col>
                            </el-row>
                            <el-row style="text-align: right;font-size: medium">
                                <el-col :span="12" style="text-align: right;font-weight: 700;" >
                                    <div>传真：</div>
                                </el-col>
                                <el-col :span="12" style="text-align: left;" >
                                    <div>{{this.userInfo.fax}}</div>
                                </el-col>
                            </el-row>
                            <el-row style="text-align: right;font-size: medium">
                                <el-col :span="12" style="text-align: right;font-weight: 700;" >
                                    <div>归属企业：</div>
                                </el-col>
                                <el-col :span="12" style="text-align: left;" >
                                    <div>{{this.userInfo.orgName}}</div>
                                </el-col>
                            </el-row>
                            <el-row style="text-align: right;font-size: medium">
                                <el-col :span="12" style="text-align: right;font-weight: 700;" >
                                    <div>归属区域：</div>
                                </el-col>
                                <el-col :span="12" style="text-align: left;" >
                                    <div>{{this.userInfo.area}}</div>
                                </el-col>
                            </el-row>
                    </div>
                </el-aside>
                <el-container>
                    <el-main>
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <span style="float: left"><b>账号绑定</b></span>
                            </div>
                            <div v-for="o in 1" :key="o" class="text item">
                                <el-table :data="tableData" style="width: 100%">
                                    <el-table-column prop="orgName" label="账号名"/>
                                    <el-table-column prop="status" label="账号状态" >
                                        <template slot-scope="scope">{{scope.row.status === 1 ? '激活' : '冻结'}}</template>
                                    </el-table-column>
                                    <el-table-column label="操作" align="center">
                                        <template slot-scope="scope">
                                            <el-button
                                                    size="mini"
                                                    @click="handleEdit(scope.$index, scope.row)"
                                            >
                                                激活
                                            </el-button>
                                            <el-button
                                                    size="mini"
                                                    type="danger"
                                                    @click="handleDelete(scope.$index, scope.row)"
                                            >
                                                冻结
                                            </el-button>
                                        </template>
                                    </el-table-column>

                                </el-table>
                            </div>
                            <div v-for="o in 1" :key="o" class="text item">
                                <el-table :data="tableData" style="width: 100%">
                                    <el-table-column prop="username" label="账号名" />
                                    <el-table-column prop="status" label="账号状态" >
                                        <template slot-scope="scope">{{scope.row.status === 0 ? '激活' : '冻结'}}</template>
                                    </el-table-column>
                                    <el-table-column label="操作" align="center">
                                        <template slot-scope="scope">
                                            <el-button
                                                    size="mini"
                                                    @click="handleEdit(scope.$index, scope.row)"
                                            >
                                                激活
                                            </el-button>
                                            <el-button
                                                    size="mini"
                                                    type="danger"
                                                    @click="handleDelete(scope.$index, scope.row)"
                                            >
                                                冻结
                                            </el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </el-card>
                    </el-main>
                </el-container>
            </el-container>
        </el-container>
    </div>
</template>
<script>
    import {getUserInfo} from "../../../api/userMG";

    export default {
        name: 'my-info',
        data() {
            return {
                circleUrl: 'http://localhost:8082/picture/photo.png',
                userInfo: {},
                tableData: [],
            }
        },
        methods: {
            handleEdit(index, row) {
                console.log(index, row)
            },
            handleDelete(index, row) {
                console.log(index, row)
            },
        },
        created() {
            const token = localStorage.getItem('JWT_TOKEN');
            getUserInfo(token).then(res => {
                console.log(res);
                this.userInfo = res.data;

                console.log(res.data.orgName);
                this.tableData = [res.data];
                console.log(this.tableData);
            })
        }
    }
</script>
<style scoped>

    .el-aside {
        line-height: 44px;
        text-align: center;
        background-color: #d3dce6;
    }

    .el-main {
        line-height: 36px;
        text-align: center;
        background-color: #e9eef3;
    }

    .demo-basic--circle {
        align: 'center';
        margin-top: 30px;
    }

    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: '';
    }

    .clearfix:after {
        clear: both;
    }

    .box-card {
        border-radius: 30px;
    }
</style>
